
const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const setting = {
    gravity: 0.2,
    shrik: 0.95,
    particleNum: 100
}

function Particle(hue, x, y) {
    this.x = x
    this.y = y
    this.dx = 0
    this.dy = 0
    this.size = 0
    this.hue = hue

    this.draw = function () {
        fill(this.hue, 100, 100)
        circle(this.x, this.y, this.size)
    }

    this.update = function () {
        this.x += this.dx
        this.y += this.dy
        this.dy += setting.gravity
        this.size *= setting.shrik
        this.draw()
    }
}

const particles = []

//每一帧都会调用
function makeParticles() {
    for (let i = 0; i < 2; i++) {
        const hue = floor(random(100))
        const p = new Particle(hue, mouseX, mouseY)

        //魔法
        var angle = PI + random(-PI, PI);
        var speed = random(4, 8);
        p.dx = sin(angle) * speed;
        p.dy = cos(angle) * speed;

        p.size = random(8,18);

        particles.push(p)
        if (particles.length > setting.particleNum) {
            particles.shift()
        }
    }
}

function setup() {
    createCanvas(innerWidth, innerHeight)
    frameRate(60)
    colorMode(HSB, 100)
    blendMode(ADD);
    noStroke()
    background(0)
}


function draw() {
    stats.begin()
    clear()
    background(0)
    makeParticles()
    particles.forEach(p => {
        p.update()
    })
    stats.end()
}